<template>
  <div
    class="u-progress"
    :style="{
      borderRadius: round ? '50px' : 0,
      height: height + 'px',
      backgroundColor: inactiveColor
    }"
  >
    <div
      :class="[
        type ? `u-type-${type}-bg` : '',
        striped ? 'u-striped' : '',
        striped && stripedActive ? 'u-striped-active' : ''
      ]"
      class="u-active"
      :style="[progressStyle]"
    >
      <slot v-if="$slots.default || $slots.$default" />
      <div v-else-if="showPercent" class="percent">
        {{ percent + '%' }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  // tips：封装的是uview的进度条
  import { computed, defineComponent } from 'vue'
  const props = {
    // 两端是否显示半圆形
    round: {
      type: Boolean,
      default: true
    },
    // 主题颜色
    type: {
      type: String,
      default: ''
    },
    // 激活部分的颜色
    activeColor: {
      type: String,
      default: '#19be6b'
    },
    inactiveColor: {
      type: String,
      default: '#ececec'
    },
    // 进度百分比，数值
    percent: {
      type: Number,
      default: 0
    },
    // 是否在进度条内部显示百分比的值
    showPercent: {
      type: Boolean,
      default: true
    },
    // 进度条的高度，单位px
    height: {
      type: [Number, String],
      default: 14
    },
    // 是否显示条纹
    striped: {
      type: Boolean,
      default: false
    },
    // 条纹是否显示活动状态
    stripedActive: {
      type: Boolean,
      default: false
    }
  }
  export default defineComponent({
    name: 'ULineProgress',
    props,
    setup(props) {
      const progressStyle = computed(() => {
        let style: any = {}
        style.width = props.percent + '%'
        if (props.activeColor) style.backgroundColor = props.activeColor
        return style
      })
      return {
        progressStyle
      }
    }
  })
</script>

<style lang="scss" scoped>
  .u-progress {
    overflow: hidden;
    height: 15px;
    display: inline-flex;
    align-items: center;
    width: 100%;
    border-radius: 50px;
  }

  .u-active {
    width: 0;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-items: flex-end;
    justify-content: space-around;
    font-size: 12px;
    color: #fff;
    transition: all 0.4s ease;
  }

  .u-striped {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 39px 39px;
  }

  .percent {
    display: flex;
    align-items: center;
    padding-top: 1.02px;
  }

  .u-striped-active {
    animation: progress-stripes 2s linear infinite;
  }

  @keyframes progress-stripes {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 39px 0;
    }
  }
</style>
